<template>
	<view class="container">
		<top-back-navbar position="fixed" title="签到" background="#ffffff" color="#000000"></top-back-navbar>
		<view class="header u-f-ajc u-f-column">
			<view class="lists u-f-ac u-f-jsa">
				<view class="items u-f-ajc" v-for="(item, index) in sign_list" :key="index"
					:class="item.status == 1 ? 'active' : ''">
					<view v-if="item.status == 1">
						<u-icon name="checkbox-mark"></u-icon>
					</view>
					<view v-else>+{{index + 1}}</view>
				</view>
			</view>
			<view style="width: 100%;">
				<u-steps :list="numList" :current="current" active-color="#d52d22"></u-steps>
			</view>
			<view style="padding: 30rpx;width:100%;">
				<button type="primary" style="background-color: #d52d22;color:#fff; width:100%;border-radius: 60rpx;"
					:custom-style="customStyle" @click="signin">立即打卡</button>
			</view>
		</view>
	</view>
</template>

<script>
	import yuDatetimePicker from "@/components/yu-datetime-picker/yu-datetime-picker.vue"
	export default {
		components: {
			yuDatetimePicker
		},
		data() {
			return {
				current: 0,
				customStyle: {
					backgroundColor: '#30549C',
					height: '90rpx',
				},
				numList: [],
				sign_list: [],
				openid: '',
				sign: '点击签到',
				disabled: 'disabled',
				signed: '',
				data: [],
				my_year: '',
				my_month: '',
				showorhide: 'none',
			};
		},
		onLoad: function() {
			this.$GetOpenid().then(res => {
				this.openid = res;
				this.setAjax()
			})
		},
		methods: {
			setAjax() {
				uni.showLoading()
				uni.request({
					url: this.$BASE_URL + '/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=sign&app=1',
					method: 'POST',
					data: {
						'openid': this.openid
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						uni.hideLoading()
						if(res.data.error == 0){
							let list = Array.isArray(res.data.sign_list) ? res.data.sign_list : [],
								numList = [],current=0;
							list.forEach((item,index) => {
								numList.push({
									name: item.time
								})
								if(item.status == 1){
									current=index
								}
							})
							this.numList = numList;
							this.sign_list = list;
							this.current=current;
						}else{
							uni.showModal({
								content: res.data.message,
								confirmText: "确定",
								cancelText: "取消",
								showCancel:false,
								success: res => {
									this.$u.route({type: 'back', delta: 1})
								},
							})
						}
						
					},
					fail: () => {},
					complete: () => {}
				});
			},
			signin() {
				uni.request({
					url: this.$BASE_URL + '/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=sign.dosign&app=1',
					method: 'POST',
					data: {
						'openid': this.openid
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						if (res.data.result && res.data.result.message) {
							uni.showModal({
								content: res.data.result.message,
								confirmText: "确定",
								cancelText: "取消",
								success: res => {},
							})
						}
						this.setAjax()
						uni.hideLoading()
					},
					fail: () => {},
					complete: () => {}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #f3f6fb;
		height: 100%;
	}

	.container {
		height: 100%;
		padding: 90rpx 30rpx 30rpx 30rpx;
	}

	.header {
		width: 100%;
		border-radius: 20rpx;
		box-sizing: border-box;
		height: 400upx;
		background-color: #fff;
		box-shadow: 0px 2px 8px 3px rgba(235, 235, 235, 0.4);
		;

		.lists {
			width: 100%;
			margin-bottom: 20rpx;

			.items {
				border-radius: 100%;
				width: 66rpx;
				height: 66rpx;
				background-color: #F0EFF5;
				color: #888888;
			}

			.active {
				background-color: #d52d22;
				color: #fff;
			}
		}
	}

	.one {
		flex: 1;
	}

	.one_one {
		margin-top: 150upx;
		color: #FFFFFF;
	}

	.two {
		flex: 1.5;
	}

	.avatar image {
		margin-top: 50upx;
		border-radius: 100upx;
		background-color: #fff;
	}

	.white {
		color: #fff;
	}

	.yellow {
		color: yellow;
	}

	.details {
		position: absolute;
		top: 20upx;
		right: 10upx;
		color: #ccc;
	}

	.status {
		font-size: 32upx;
		padding: 5upx 8upx;
		width: 150upx;
		display: inline-block;
		border: 1px solid #fff;
		border-radius: 50upx;
	}

	.day {
		height: 100upx;
		color: #888;
	}

	.week {
		position: relative;
		background-color: #FFFFFF;
	}

	.scroll {
		position: absolute;
		z-index: 99;
		top: 60upx;
		left: 60upx;
		background-color: #eee;
		border: 2upx;
	}
</style>
